<template>
  <div class="home-page">
    <div class="home-container flex-column align-center">
      <b-navbar toggleable="lg" type="dark">
        <b-navbar-brand href="#">
          <img src="../assets/images/home/logo.png" class="logo-img d-inline-block align-top" alt="logo">
        </b-navbar-brand>
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav>
            <b-nav-item href="#Welcome">About</b-nav-item>
            <b-nav-item href="#Purpose">Purpose</b-nav-item>
            <b-nav-item href="#Development">Plan</b-nav-item>
            <b-nav-item href="#Rewards">Rewards</b-nav-item>
            <b-nav-item href="https://cryptolife.gitbook.io/cryptolife/">White paper</b-nav-item>
            <b-nav-item href="#TOKEN">Token information</b-nav-item>
            <b-nav-item href="#Contact">Contact us</b-nav-item>
            <b-nav-item-dropdown text="EN" right>
              <b-dropdown-item href="#">EN</b-dropdown-item>
            </b-nav-item-dropdown>
            <b-nav-item href="#">
              <div class="buy-button flex-center">BUY</div>
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>

      <div class="content-container">
        <section class="main cl-white">
          <a id="Welcome"></a>
          <div class="welcome-container border-box fade-in">
            <div class="top-left dis-flex border-box">
              <img class="window-img" src="../assets/images/home/window-icon.png" alt="">
              <!--              <img src="../assets/images/home/logo.png" class="window-img" alt="logo">-->
              <div class="ml-46 flex-1 flex-column">
                <p class="fs-50 font-r lh-38">Welcome to CRYPTOLIFE!</p>
                <p class="mt-46 border-box">
                  CRYPTOLIFE is a large-scale Metaverse NFT <br>
                  project that combines the virtual world with reality.</p>
              </div>
            </div>
            <div class="top-right flex-column">
              <p>CRYPTOLIFE aims to exploit the opportunity which the metaverse has to offer,<br>
                by combining the metaverse with tourism
              </p>
              <p class="mt-40">CRYPTOLIFE not only aims to build virtual landmark property on the metaverse<br>
                but also gives its owner the privilege to have rights to subsequent income<br>
                generated on the CRYPTOLIFE metaverse.
              </p>
              <p class="mt-40">The project provides its investors with a virtual city identity as NFTs, with this<br>
                identity investors will enjoy<br>
                the benefits of owning this virtual property in the real world.
              </p>
            </div>
          </div>
          <div class="rise-container justify-end border-box">
            <div class="flex-column rise-right fade-in">
              <div class="dis-flex align-center">
                <img class="cycle-right" src="../assets/images/home/cycle-right.png" alt="">
                <p class="ml-34 font-r fs-36 lh-28">Rise of the Metaverse</p>
              </div>
              <p class="mt-50">
                In recent years, the development of related technologies such as the Internet and
                VR (virtual reality), has facilitated the connections
                between the virtual world and real life, which has led to the emergence of
                the Metaverse concept.
              </p>
              <p class="mt-46">
                The Metaverse is essentially an interactive state of spirit and body, virtual
                and reality, which is changing the way we perceive the world.
              </p>
              <p class="mt-42">
                As a result of this, we decide to launch the CRYPTOLIFE project for the purpose
                of building a Metaverse city by using blockchain technology to
                provide our investors a wonderful CRYPTOLIFE.
              </p>
              <p class="a-link mt-46">We fully believe that we are the pioneers of the Metaverse.</p>
              <a href="https://cryptolife.gitbook.io/cryptolife/" class="learn-more font-b fs-14 cl-666 flex-center mt-76">LEARN MORE &nbsp;></a>
            </div>
          </div>
          <div class="tourism-container border-box fade-in">
            <div class="tourism-left">
              <div class="dis-flex align-center">
                <img class="cycle-right" src="../assets/images/home/cycle-right.png" alt="">
                <p class="ml-34 font-r fs-36 lh-28">Tourism Will Flourish</p>
              </div>
              <div class="dis-flex mt-110">
                <div class="flex-1 flex-column">
                  <div class="single-tourism mt-4 dis-flex pr-20 border-box">
                    <div class="single-tourism-left"></div>
                    <div class="single-tourism-right flex-1 ml-20">
                      <p class="single-tourism-title font-b fs-18">COVID-19 WILL LEAVE</p>
                      <p class="mt-36">
                        The COVID-19 pandemic will soon be history as the world is trying out vaccines for it.
                      </p>
                    </div>
                  </div>
                  <div class="single-tourism mt-4 dis-flex pr-20 border-box">
                    <div class="single-tourism-left"></div>
                    <div class="single-tourism-right flex-1 ml-20">
                      <p class="single-tourism-title font-b fs-18">TOURISM WILL RECOVER</p>
                      <p class="mt-36">
                        We believe that in the near future, the demand for tourism will increase explosively and tourism
                        will return to the level before the COVID-19.
                      </p>
                    </div>
                  </div>
                  <div class="single-tourism mt-4 dis-flex pr-20 border-box">
                    <div class="single-tourism-left"></div>
                    <div class="single-tourism-right flex-1 ml-20">
                      <p class="single-tourism-title font-b fs-18">CRYPTOLIFE TO THE REAL WORLD</p>
                      <p class="mt-36">
                        Based on this inspiration, our CRYPTOLIFE will complete the transformation from the virtual
                        world of the metaverse to the real world.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="flex-1 flex-column">
                  <div class="single-tourism mt-4 dis-flex pr-20 border-box">
                    <div class="single-tourism-left"></div>
                    <div class="single-tourism-right flex-1 ml-20">
                      <p class="single-tourism-title font-b fs-18">IDENTITY NFT</p>
                      <p class="mt-36">
                        The project provides its investors with a virtual city identity as NFTs, with this identity
                        investors will enjoy the benefits of owning this virtual property in the real world.
                      </p>
                    </div>
                  </div>
                  <div class="single-tourism mt-4 dis-flex pr-20 border-box">
                    <div class="single-tourism-left"></div>
                    <div class="single-tourism-right flex-1 ml-20">
                      <p class="single-tourism-title font-b fs-18">OWNERS OF CRYPTOLIFE</p>
                      <p class="mt-36">
                        The investors of CRYPTOLIFE are holders of tokens, owners of CRYPTOLIFE city and the builders of
                        CRYPTOLIFE city.
                      </p>
                    </div>
                  </div>
                  <div class="single-tourism mt-4 dis-flex pr-20 border-box">
                    <div class="single-tourism-left"></div>
                    <div class="single-tourism-right flex-1 ml-20">
                      <p class="single-tourism-title font-b fs-18">CRYPTOLIFE METAVERSE</p>
                      <p class="mt-36">
                        Along the way, there will be more and more CRYPTOLIFE cities, and eventually a Metaverse
                        belonging to CRYPTOLIFE will be established.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a id="Purpose"></a>
          <div class="purpose-container border-box fade-in">
            <div class="purpose-all">
              <div class="purpose-left">
                <div class="flex-1 flex-column">
                  <img class="purpose-img fade-in" src="../assets/images/home/purpose-1.png" alt="">
                  <img class="purpose-img fade-in" src="../assets/images/home/purpose-2.png" alt="">
                </div>
                <div class="flex-1 flex-column pt-40 border-box">
                  <img class="purpose-img purpose-img-last fade-in" src="../assets/images/home/purpose-3.png" alt="">
                </div>
              </div>
              <div class="purpose-right flex-1 flex-column ml-108 border-box">
                <div class="dis-flex align-center">
                  <img class="cycle-right" src="../assets/images/home/cycle-right.png" alt="">

                  <p class="ml-34 font-r fs-36 lh-28">Purpose of the Project</p>
                </div>
                <p class="a-link mt-48">CRYPTOLIFE will benefit from the growth of tourism demand. </p>
                <p class="mt-48">
                  Together with our investors, we will form a partnership with hotels,<br>
                  shops of the hot spots in the world to provide real benefits to our victual city citizens,<br>
                  such as discounts at CRYPTOLIFE hotels,<br>
                  service fee reductions, and even use CRYPTOLIFE tokens to pay in CRYPTOLIFE city.
                </p>
                <p class="a-link mt-48">All CRYPTOLIFE holders will be owners of CRYPTOLIFE city,<br>
                  and we hope all investors will be proud of participating in this great project.</p>
                <div @click="clickBtn" class="learn-more fs-14 cl-666 flex-center mt-68">LEARN MORE &nbsp;></div>
              </div>
            </div>
          </div>
          <a id="Development"></a>
          <div class="dev-container border-box flex-column align-center">
            <div class="line mt-60"></div>
            <div class="mt-44 fs-30 font-r">Development Plan</div>
            <div class="mt-40 text-center">
              Let the holder become the master of cryptolife, and let the holder feel <br> proud to participate in this
              great
              plan
            </div>
            <div class="dev-container-img width-100 justify-center mt-74">
              <div class="dev-img fade-in dev-img-1">
                <p class="text-center font-r fs-4">
                  The first phase
                </p>
                <div class="mart-text">
                  The first step is to construct the CRYPTOLIFE identity
                  certificate. We launch the CRYPTOLIFE identity token.
                  Investors who purchase and hold CRYPTOLIFE token
                  are qualified of purchasing CRYPTOLIFE NFT.
                </div>
              </div>
              <div class="dev-img fade-in dev-img-left dev-img-2">
                <p class="text-center font-r fs-4">
                  The second phase
                </p>
                <div class="mart-text">
                  Second step, we will start the sales of <br>
                  CRYPTOLIFE NFTs.
                </div>

              </div>
              <!--              <img class="dev-img fade-in" src="../assets/images/home/dev-1.png" alt="">-->
              <!--              <img class="dev-img dev-img-left fade-in" src="../assets/images/home/dev-2.png" alt="">-->
            </div>
            <div class="dev-container-img width-100 justify-between">
              <div class="dev-img fade-in dev-img-3">
                <p class="text-center font-r fs-4">
                  The third phase
                </p>
                <div class="mart-text">
                  Third step, CRYPTOLIFE will establish a community to
                  review and select several suitable targets, initiate
                  a community vote.Let all CRYPTOLIFE citizens
                  vote to establish our common needs in the real world.
                </div>
              </div>
              <div class="dev-img fade-in dev-img-4">
                <p class="text-center font-r fs-4">
                  The fourth phase
                </p>
                <div class="mart-text">
                  The fourth step is to go into the DAO, and based on CRYPTOLIFE
                  citizens votes, we will execute Cryptolife citizens common
                  needs. By doing this, we will make profits, and all the profits
                  will be distributed to the holders of CRYPTOLIFE NFT.
                </div>
              </div>
              <div class="dev-img fade-in dev-img-5">
                <p class="text-center font-r fs-4">
                  The fifth phase
                </p>
                <div class="mart-text">
                  Of course, we will continue to create more benefits for our
                  CRYPTOLIFE citizens around the world, and will integrate all
                  CRYPTOLIFE privileges into a CRYPTOLIFE Metaverse!
                </div>
              </div>


              <!--              <img class="dev-img fade-in" src="../assets/images/home/dev-3.png" alt="">-->
              <!--              <img class="dev-img fade-in" src="../assets/images/home/dev-4.png" alt="">-->
              <!--              <img class="dev-img fade-in" src="../assets/images/home/dev-5.png" alt="">-->
            </div>
          </div>
          <div class="road-container flex-column fade-in">
            <div class="dis-flex align-center">
              <img class="cycle-right" src="../assets/images/home/cycle-right.png" alt="">
              <p class="ml-34 lh-28 fs-36 font-r">Road Map</p>
            </div>
            <div class="mt-46">
              Give priority to a country with developed tourism industry for the planning of cryptolife city and<br>
              build a city belonging to cryptolife citizens
            </div>
            <div class="dis-flex mt-76">
              <div class="fs-24 flex-1 font-r">MARCH</div>
              <div class="fs-24 flex-1 font-r">APRIL</div>
              <div class="fs-24 flex-1 font-r">MAY- JUNE</div>
              <div class="fs-24 flex-1 font-r">Q3-Q4</div>
            </div>
            <img class="width-100 mt-36 fade-in" src="../assets/images/home/road-map.png" alt="">
            <div class="dis-flex mt-40 op-7">
              <div class="flex-1 flex-column pr-20 border-box">
                <span>Telegraph,</span>
                <span>discord establishment,</span>
                <span>official website,</span>
                <span>twitter establishment,</span>
                <span>Identity token issuance</span>
              </div>
              <div class="flex-1 flex-column pr-20 border-box">
                        <span>
                          Cryptolife NFT design and production
                        </span>
                <span>
                          Production of pre-sale website
                        </span>
                <span>
                          Collect white lists and conduct large-scale publicity
                        </span>
              </div>
              <div class="flex-1 flex-column pr-20 border-box">
                        <span>
                          Sell cryptolife NFT
                        </span>
                <span>
                          Start Dao governance mode
                        </span>
                <span>
                          Recruit talents and establish a treasury
                        </span>
              </div>
              <div class="flex-1 flex-column">
                <span>Start of urban planning and construction</span>
                <span>Cryptolife meta universe construction starts</span>
              </div>
            </div>
          </div>

          <div class="token-container width-100 flex-column align-center border-box">
            <a id="Rewards"></a>
            <div class="line mt-60"></div>

            <div class="mt-44 fs-30 lh-28 font-r">Rewards and Benefits of CRYPTOLIFE Citizens
            </div>
            <div class="mt-40 text-center fs-6 op-7">
              Hold a certain amount of CRYPTOLIFE token to get the pre-sale whitelist of CRYPTOLIFE NFT.
            </div>

            <div class="token-img-container width-100 justify-between mt-74">
              <div class="single-img token-img-center flex-column pt-50 border-box fade-in text-center fs-6 op-7">
                <div class="flex-column single-img-left">
                  <!--                  <span class="op-7">Hotel price</span>-->
                  <!--                  <span class="fs-30 mt-14 font-r">$ 12453</span>-->
                  <!--                  <div class="line-token mt-30 "></div>-->
                  CRYPTOLIFE NFT owners will have the right to share dividends from all subsequent income, enjoy all
                  subsequent privileges and vote for subsequent development!
                </div>
                <img class="token-img mt-46" src="../assets/images/home/token-1.png" alt="">
              </div>

              <div class="single-img token-img-center fade-in text-center fs-6 op-7">
                <img class="token-img" src="../assets/images/home/token-2.png" alt="">
                <div class="flex-column width-100 single-img-center mt-60 mb-3 ">
                  <!--                  <span class="mt-60 op-7">Hotel price</span>-->
                  <!--                  <span class="fs-30 mt-14 font-r">$ 12453</span>-->
                  <!--                  <div class="line-long mt-20 "></div>-->
                  CRYPTOLIFE NFT owners will have the right to purchase other NFTs first!
                </div>
              </div>
              <div class="single-img token-img-center flex-column pt-50 border-box fade-in text-center fs-6 op-7">
                <div class="flex-column width-100 single-img-right">
                  <!--                  <span class="op-7">Hotel price</span>-->
                  <!--                  <span class="fs-30 mt-14 font-r">$ 12453</span>-->
                  <!--                  <div class="line-token mt-30 "></div>-->
                  CRYPTOLIFE NFT allows you to enjoy services and discounts in CRYPTOLIFE cities.
                  <br>
                  CRYPTOLIFE cities can support the payments by using our CRYPTOLIFE tokens.
                </div>
                <img class="token-img mt-46" src="../assets/images/home/token-3.png" alt="">
              </div>
            </div>
          </div>
          <div class="bottom-container border-box">
            <a id="TOKEN"></a>
            <div class="flex-column align-center">
              <img class="bottom-img" src="../assets/images/home/cycle-right.png" alt="">
              <div class="mt-40 fs-30 lh-28 font-r">TOKEN INFORMATION
              </div>
<!--              <div class="mt-40 text-center">-->
<!--                SD coins are used to purchase the platform for sale identity<br>-->
<!--                generation white list qualification-->
<!--              </div>-->
              <div class="text-center mt-3">
                <div>Allocations</div>
                <div>
                  <div>Symbol: $NEWLIFE</div>
                  <div>Total supply: 1,000,000</div>
                  <div>0%: Team</div>
                </div>
              </div>
              <div class="text-center mt-3">
                <div>Tax&Fees</div>
                <div>
                  <div>Total: 10%</div>
                  <div>5%: AssetBack Percent</div>
                  <div>5%: Smart Rising Price Floor</div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div class="footer-container width-100 dis-flex justify-center pt-58 pb-44 border-box">
      <div class="footer-content justify-between">
        <a id="Contact"></a>
        <div class="footer-item flex-column">
          <span class="fs-30 font-b op-7">JOIN US</span>
          <span class="mt-38">Let's create brilliance together. We have the trust</span>
          <span>of 26k + holders. Join us to build</span>
        </div>
        <div class="footer-item flex-column">
          <span class="fs-30 font-b op-7">TECHNOLOGY</span>
          <span class="mt-38">contract</span>
          <span>white paper</span>
          <span>road map</span>
          <span>Ecosystem</span>
        </div>
        <div class="footer-item flex-column">
          <span class="fs-30 font-b op-7">CRYPTOLIFE</span>
          <span class="mt-38">about</span>
          <span>Token ecology</span>
          <span>file</span>
          <span>frequently asked questions</span>
          <span>contact</span>
          <span>team</span>
        </div>
      </div>
    </div>
    <div class="concat-container">
      <div class="concat-content dis-flex align-center">
        <div class="fs-14 fw-600">© 2022 Starl. All rights reserved.</div>
        <div class="flex-1 dis-flex justify-end align-center">
          <img class="mr-20" src="../assets/images/home/concat-1.png" alt="">
          <img class="mr-20" src="../assets/images/home/concat-2.png" alt="">
          <img class="mr-20" src="../assets/images/home/concat-3.png" alt="">
          <img class="mr-20" src="../assets/images/home/concat-4.png" alt="">
          <img src="../assets/images/home/concat-5.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  props: {
    msg: String
  },
  data() {
    return {
      fadeInElements: []
    }
  },
  computed: {
    isMobile() {
      return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    }
  },
  mounted() {
    this.fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
    document.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    clickBtn() {
      window.open('https://www.baidu.com')
    },
    handleScroll() {
      for (let i = 0; i < this.fadeInElements.length; i++) {
        let elem = this.fadeInElements[i]
        if (this.isElemVisible(elem)) {
          elem.style.opacity = '1'
          this.fadeInElements.splice(i, 1) // 只让它运行一次
        }
      }
    },
    isElemVisible(el) {
      let rect = el.getBoundingClientRect()
      let elemTop = rect.top + 200 // 200 = buffer
      let elemBottom = rect.bottom
      return elemTop < window.innerHeight && elemBottom >= 0
    }
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.handleScroll)
  }

}
</script>

<style lang="scss">

.fade-in {
  opacity: 0;
  transition: opacity 1.5s;
}

.op-7 {
  opacity: 0.7;
}

.dropdown-toggle::after {
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: none !important;
  width: 18px;
  height: 13px;
  content: "";
  background-size: 100% 100%;
  display: block;
  background-image: url("../assets/images/home/save.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 10px;
}

.navbar {
  width: 100%;
}

@media (max-width: 992px) {
  .navbar {
    justify-content: flex-end !important;
  }
}

.navbar-dark .navbar-nav .nav-link {
  color: #ffffff !important;
  font-size: 14px;
  font-family: MicrosoftYaHei;
}

.dropdown-toggle::after {
  top: 13px;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.font-b {
  font-family: AGENCYB, serif;
}

.font-r {
  font-family: AGENCYR, serif;
}

@media (max-width: 992px) {
  .navbar-collapse {
    .navbar-nav {
      background: rgba(0, 0, 0, 0.5);
    }
  }
}

.navbar-collapse {
  justify-content: center !important;
  align-items: center !important;

  .navbar-nav {
    align-items: center;

    .nav-item {
      padding: 0 1rem;

      .nav-link {
        color: #ffffff;
        font-size: 14px;
        font-family: MicrosoftYaHei;
      }

      .buy-button {
        height: 30px;
        width: 80px;
        background: #115182;
        border-radius: 20px;
        cursor: pointer;
      }
    }

    .nav-link {
      color: #ffffff;
      font-size: 14px;
      font-family: MicrosoftYaHei;
    }

    .b-nav-dropdown {
      color: #ffffff;
      font-size: 14px;
      font-family: MicrosoftYaHei;
    }
  }
}


.home-page {
  font-family: MicrosoftYaHei;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0;
  color: #ffffff;
}

.header-icon {
  width: 18px;
  height: 13px;
}

.learn-more {
  width: 150px;
  height: 28px;
  background-color: #ffffff;
  border-radius: 14px;
  cursor: pointer;
  color: #066666;
  text-decoration: none;
}

.cycle-right {
  width: 14px;
  height: 28px;
}

.a-link {
  text-decoration: underline;
  font-weight: bold;
  color: #12b2aa;
  font-style: italic;
}

.line {
  width: 40px;
  height: 5px;
  background-color: #12b2aa;
}

.line-token {
  width: 40px;
  height: 5px;
  background-color: #18e6dd;
}

@media (min-width: 992px) {
  .home-page {
    font-size: 0.625vw;
    line-height: 1.354vw;
    color: #ffffff;

    .home-container {
      background-image: url("../assets/images/home/bg.jpg");
      background-repeat: no-repeat;
      background-size: 100% auto;
      color: #ffffff;
      position: relative;
      width: 100vw;
      height: 423.697917vw;

      .logo-img {
        width: 150px;
        margin-left: 40px;
      }

      .content-container {
        width: 62.5vw;

        .main {
          margin-top: calc(63.54vw - 64px);

          .welcome-container {
            display: flex;
            height: 19.95vw;

            .top-left {
              flex: 1;

              .window-img {
                width: 3.4375vw;
                height: 3.4375vw;
              }
            }

            .top-right {
              flex: 1;
            }
          }


          .rise-container {
            display: flex;
            height: 52.083vw;
            padding-top: 12.1875vw;

            .rise-right {
              width: 22.3958vw;
            }
          }

          .tourism-container {
            height: 61.04vw;
            padding-top: 17.71vw;

            .tourism-left {
              width: 47.6vw;

              .single-tourism {
                height: 9.6875vw;

                .single-tourism-left {
                  width: 23px;
                  height: 23px;
                  border-radius: 50%;
                  background: #ffffff;
                }
              }
            }
          }

          .purpose-container {
            height: 50.3125vw;
            padding-top: 7.1875vw;

            .purpose-img {
              display: flex;
            }

            .purpose-all {
              display: flex;
            }

            .purpose-left {
              display: flex;
            }

            .purpose-img {
              width: 14.84375vw;
              height: 18.54vw;
            }

            .purpose-right {
              padding-top: 8vw;
            }
          }

          .dev-container {
            height: 72.4vw;
            width: 100%;


            .dev-container-img {
              display: flex;
              width: 100%;
            }

            .dev-img {
              width: 18.906vw;
              height: 25vw;
              padding: 10vw 1.5vw;

              .mart-text {
                font-size: 1vw;
                margin-top: 1.6vw;
                color: #ffffff;
                opacity: 0.7;
                text-align: center;
              }
            }

            .dev-img-left {
              margin-left: 2.91vw;
            }

            .dev-img-1 {
              background: url("../assets/images/home/item1.png") no-repeat;
              background-size: cover;
            }

            .dev-img-2 {
              background: url("../assets/images/home/item2.png") no-repeat;
              background-size: cover;
            }

            .dev-img-3 {
              background: url("../assets/images/home/item3.png") no-repeat;
              background-size: cover;
            }

            .dev-img-4 {
              background: url("../assets/images/home/item4.png") no-repeat;
              background-size: cover;
            }

            .dev-img-5 {
              background: url("../assets/images/home/item5.png") no-repeat;
              background-size: cover;
            }

          }

          .road-container {
            height: 22.3958vw;
          }

          .token-container {
            padding-top: 8.49vw;


            .token-img-container {
              display: flex;

              .token-img-center {
                display: flex;
                flex-direction: column;
                align-items: center;
              }

              .single-img {
                width: 28%;
              }
            }

            .token-img {
              width: 15.2vw;
              height: 18.02vw;
            }

            .single-img-center {
              align-items: center;

              .line-long {
                width: 100px;
                height: 5px;
                background-color: #18e6dd;
              }
            }

            .single-img-right {
              align-items: flex-end;
            }
          }

          .bottom-container {
            margin-top: 6.0625vw;

            .bottom-img {
              transform: rotateZ(90deg);
            }
          }
        }
      }
    }

    .footer-container {
      background-color: #202026;
      color: #ffffff;
      display: flex;

      .footer-content {
        width: 62.5vw;;
        display: flex;

        .footer-item {
          width: 17vw;
        }
      }
    }

    .concat-container {
      height: 57px;
      background: #09000b;
      display: flex;
      align-items: center;
      justify-content: center;

      .concat-content {
        width: 62.5vw;;
      }
    }
  }
}

@media (max-width: 992px) {
  .navbar-brand {
    flex: 1
  }
  .home-page {
    font-size: 12px;
    line-height: 18px;

    .home-container {
      background-image: url("../assets/images/home/bg.jpg");
      background-repeat: no-repeat;
      background-size: 100% auto;
      color: #ffffff;
      position: relative;
      width: 100vw;
      overflow: hidden;
      background-color: #163557;

      .logo-img {
        width: 100px;
        margin-left: 40px;
      }

      .content-container {
        .main {
          margin-top: 250px;
          padding: 0 32px;


          .welcome-container {

            .top-left {
              .window-img {
                width: 66px;
                height: 66px;
              }
            }

            .top-right {
              margin-top: 50px;
            }
          }

          .rise-container {
            margin-top: 40px;
          }

          .tourism-container {
            margin-top: 40px;

            .single-tourism {
              margin-top: 16px;
            }
          }

          .purpose-container {
            margin-top: 40px;

            .purpose-img {
              width: 70%;
              margin-left: 15%;
            }
          }

          .dev-container {
            margin-top: 40px;

            .dev-container-img {
              text-align: center;
              width: 100%;

              .dev-img {
                margin: 0 auto;
                width: 70%;
                height: 80vw;
                padding: 27vw 3vw;

                .mart-text {
                  font-size: 2.5vw;
                  margin-top: 5vw;
                  color: #ffffff;
                  opacity: 0.7;
                  text-align: center;
                }
              }

              .dev-img-1 {
                background: url("../assets/images/home/item1.png") no-repeat;
                background-size: 100% 100%;
              }

              .dev-img-2 {
                background: url("../assets/images/home/item2.png") no-repeat;
                background-size: 100% 100%;
              }

              .dev-img-3 {
                background: url("../assets/images/home/item3.png") no-repeat;
                background-size: 100% 100%;
              }

              .dev-img-4 {
                background: url("../assets/images/home/item4.png") no-repeat;
                background-size: 100% 100%;
              }

              .dev-img-5 {
                background: url("../assets/images/home/item5.png") no-repeat;
                background-size: 100% 100%;
              }

            }
          }

          .road-container {
            margin-top: 40px;
          }

          .token-container {
            margin-top: 40px;

            .token-img {
              width: 60%;
              margin-left: 20%;
            }

            .single-img-center {

              .line-long {
                width: 40px;
                height: 5px;
                background-color: #18e6dd;
              }
            }

            .single-img {
              margin-top: 30px;
            }

            .token-img-center {
              display: flex;
              flex-direction: column-reverse;
            }

          }

          .bottom-container {
            margin-top: 40px;
            padding-bottom: 40px;
            box-sizing: border-box;
          }
        }
      }
    }

    .footer-container {
      background-color: #202026;
      color: #ffffff;

      .footer-item {
        margin-top: 30px;
      }
    }

    .concat-container {
      height: 57px;
      background: #09000b;
      padding: 0 32px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .concat-content {
        width: 100%;
      }
    }

    .learn-more {
      margin: 2.3vw auto;
    }
  }
}

@media (min-width: 640px) and (max-width: 992px) {
  .content-container {
    width: 100%;

    .main {
      margin-top: 400px !important;
      padding: 0 32px;
    }
  }
  .purpose-left {
    display: flex;
    width: 100%;

    .purpose-img {
      display: flex;
      width: 280px;
    }

    .purpose-img-last {
      margin-left: 0 !important;
    }
  }
}

</style>
